<template>
	<div class="login-container">
		<img
			src="../../assets/images/登录页图片.png"
			class="img-responsive"
			alt="Image"
		/>

		<!-- 注册的盒子 -->
		<div class="login-box">
			<!-- 标题的盒子 -->
			<div class="title-box"></div>
			<!-- 登录的表单区域  注意不要写在标题盒子里了-->
			<el-form ref="loginRef" :model="loginForm" :rules="loginRules">
				<el-form-item prop="username">
					<el-input
						placeholder="请输入用户名"
						v-model="loginForm.username"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						type="password"
						placeholder="请输入密码"
						v-model="loginForm.password"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button class="login-btn" type="primary" @click="loginFn">
						登录
					</el-button>
					<el-link type="info" @click="$router.push('/reg')">去注册</el-link>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import { loginAPI } from '@/api'
	import { mapMutations } from 'vuex'
	export default {
		name: 'my-login',
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
				},
				loginRules: {
					username: [
						{ required: true, message: '请输入用户名', trigger: 'blur' },
						{
							pattern: /^[a-zA-Z0-9]{1,10}$/,
							message: '用户名必须是1-10的字母数字',
							trigger: 'blur',
						},
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{
							pattern: /^\S{6,15}$/,
							message: '密码必须是6-15的非空字符',
							trigger: 'blur',
						},
					],
				},
			}
		},
		methods: {
			...mapMutations(['updateToken']),
			loginFn() {
				this.$refs.loginRef.validate(async (valid) => {
					if (valid) {
						// console.log(this.loginForm)
						// 解构赋值 key是data value是值 左右两边的key值得配上
						const { data: res } = await loginAPI(this.loginForm)
						console.log(res)
						if (res.code !== 0) return this.$message.error(res.message)
						this.$message.success(res.message)
						this.updateToken(res.token)
						// 登录成功跳转到布局页
						this.$router.push('/')
					} else {
						return false
					}
				})
			},
		},
	}
</script>

<style scoped>
	.login-container {
		/* background: url('../../assets/images/login_bg.webp') center; */
		/* background-size: cover; */
		height: 100%;
		background-color: #fff;
	}
	.img-responsive {
		height: 400px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.login-box {
		width: 600px;
		height: 400px;
		/* background-color: #ff6884; */
		/* background: #84ade0; */
		background: linear-gradient(
			to bottom,
			rgba(64, 158, 255, 0.3),
			rgba(255, 104, 132, 0.3)
		);
		border-radius: 35px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding: 0 30px;
		box-sizing: border-box;
	}
	.title-box {
		margin-top: 60px;
		height: 60px;
		background: url('../../assets/images/login_title.png') center no-repeat;
	}
	.login-btn {
		width: 100%;
	}
</style>
